.righter-bar {
  font-size: 14px;
  // position: fixed;
  // left: 100px;
  // top: 64px;
  // z-index: 1000;
  width: 138px;
  height: 100%;
  padding-right: 16px;
  background-color: #f5f7f9;
  transition: .2s;
  &.collapsed {
    width: 0;
    padding-right: 0;
    // visibility: hidden;
  }
  & > ul.righter-bar-content {
    margin-left: 0;
    padding-left: 0;
    height: calc(100% - 60px);
    overflow-y: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
    & > li.item {
      position: static;
      // border-top: 1px solid #f2f2f5;
      // padding-top: 16px;
      // padding-bottom: 10px;
      text-align: left;
      list-style: none;
      &:first-child {
        border: none;
      }
      & > h2 {
        font-family: PingFangSC-Medium;
        font-weight: 700;
        color: #161617;
        line-height: 20px;
        font-size: 14px;
        text-indent: 20px;
      }
      & > ul {
        margin-left: 0;
        padding-left: 0;
        & > .item-child {
          margin-bottom: 10px;
          list-style: none;
          & > .item-three-child {
            position: relative;
            width: 102px;
            height: 30px;
            margin-left: 10px;
            padding-right: 18px;
            line-height: 30px;
            text-indent: 10px;
            color: #92929b;
            border-radius: 15px;
            &:hover {
              background-color: #f0efff;
              color: #7f79ff;
            }
            &.active {
              background-color: #f0efff;
              color: #7f79ff;
            }
            &.active:after {
              position: absolute;
              right: 10px;
              top: 11px;
              content: "";
              width: 5px;
              height: 8px;
              background: url()
                no-repeat;
              background-size: 5px 8px;
            }
          }
        }
      }
    }
  }
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
